/*
 * @Author: Snarler 18300852282@163.com
 * @Date: 2022-08-11 10:57:52
 * @LastEditors: Snarler 18300852282@163.com
 * @LastEditTime: 2022-08-18 16:22:52
 * @FilePath: \NewHouseSecuritySystem-3.0.3\src\components\ListSearch\ListSearch.jsx
 * @Description: 表格搜索组件，支持添加自定义搜索条件
 */
import './style.less'
import { Card, Form, Input, Row, Col, Button, Select, DatePicker } from 'ant-design-vue'
const { Item } = Form
const { RangePicker } = DatePicker

const ListSearch = {
  name: 'ListSearch',
  props: {},
  data () {
    return {
      advanced: false,
      form: this.$form.createForm(this),
      list: [
        {
          label: '登录账号', // 设置标签的label名
          fields: 'name', // value(Vmode)绑定的字段名
          type: 'input', // 设置标签类型为 input date select radio等
          size: 'default', // 设置标签的大小
          placeholder: '请输入登录账号', // 设置标签的placeholder
          mode: '', // 设置 Select 的模式为多选或标签
          options: [], // 设置 Select 的下拉数据源,
          validate: [],
          props: {
            addonAfter: '',
            addonBefore: '',
            disabled: false,
            id: '',
            // maxLength: 100,
            prefix: '',
            size: '',
            suffix: '',
            type: '',
            allowClear: false
          }
        },
        {
          label: '地区', // 设置标签的label名
          fields: 'area', // value(Vmode)绑定的字段名
          type: 'select', // 设置标签类型为 input date select radio等
          size: 'default', // 设置标签的大小
          placeholder: '请选择地区', // 设置标签的placeholder
          mode: '', // 设置 Select 的模式为多选或标签
          options: [
            {
              value: '5200',
              label: '贵州'
            }
          ] // 设置 Select 的下拉数据源
        },
        {
          label: '日期', // 设置标签的label名
          fields: 'dates', // value(Vmode)绑定的字段名
          type: 'date', // 设置标签类型为 input date select radio等
          size: 'default', // 设置标签的大小
          placeholder: '请选择日期' // 设置标签的placeholder
        },
        {
          label: '日期区间', // 设置标签的label名
          fields: 'dateTimes', // value(Vmode)绑定的字段名
          type: 'date-range', // 设置标签类型为 input date select radio等
          size: 'default' // 设置标签的大小
        }
      ]
    }
  },
  methods: {
    renderForm () {
      const renderAssembly = (obj) => {
        let rows = null
        if (obj instanceof Object && JSON.stringify(obj) === '{}') return
        switch (obj.type) {
          case 'input':
            rows = <Input
              placeholder={obj.placeholder }
              addonAfter={obj.props.addonAfter}
              addonBefore={obj.props.addonBefore}
              disabled={obj.props.disabled}
              id={obj.props.id}
              maxLength={obj.props.maxLength || 100}
              prefix={obj.props.prefix}
              size={obj.props.size || 'default'}
              suffix={obj.props.suffix}
              type={obj.props.type}
              allowClear={obj.props.allowClear}
            />
            break
          case 'select':
            rows = <Select
              options={obj.options}
              placeholder={obj.placeholder}
              allowClear={obj.allowClear}
              autoClearSearchValue={obj.autoClearSearchValue}
              autoFocus={obj.autoFocus}
              defaultActiveFirstOption={obj.defaultActiveFirstOption}
              disabled={obj.disabled}
              dropdownClassName={obj.dropdownClassName}
              dropdownMatchSelectWidth={obj.dropdownMatchSelectWidth}
              dropdownRender={obj.dropdownRender}
              dropdownStyle={obj.dropdownStyle}
              dropdownMenuStyle={obj.dropdownMenuStyle}
              filterOption={obj.filterOption}
              firstActiveValue={obj.firstActiveValue}
              getPopupContainer={obj.getPopupContainer}
              labelInValue={obj.labelInValue}
              maxTagCount={obj.maxTagCount}
              maxTagPlaceholder={obj.maxTagPlaceholder}
              maxTagTextLength={obj.maxTagTextLength}
              mode={obj.mode}
              notFoundContent={obj.notFoundContent}
              optionFilterProp={obj.optionFilterProp}
              optionLabelProp={obj.optionLabelProp}
              showSearch={obj.showSearch}
              showArrow={obj.showArrow}
              size={obj.size}
              suffixIcon={obj.suffixIcon}
              removeIcon={obj.removeIcon}
              clearIcon={obj.clearIcon}
              menuItemSelectedIcon={obj.menuItemSelectedIcon}
              tokenSeparators={obj.tokenSeparators}
              defaultOpen={obj.defaultOpen}
              open={obj.open}
            ></Select>
            break
          case 'date':
            rows = <DatePicker
              placeholder={obj.placeholder}
              allowClear={obj.allowClear}
              autoFocus={obj.autoFocus}
              dateRender={obj.dateRender}
              disabled={obj.disabled}
              disabledDate={obj.disabledDate}
              getCalendarContainer={obj.getCalendarContainer}
              mode={obj.mode}
              open={obj.open}
              popupStyle={obj.popupStyle}
              dropdownClassName={obj.dropdownClassName}
              size={obj.size}
              suffixIcon={obj.suffixIcon}
              inputReadOnly={obj.inputReadOnly}
              align={obj.align}
              valueFormat={obj.valueFormat}
            ></DatePicker>
            break
          case 'date-range':
            rows = <RangePicker
              placeholder={obj.placeholder}
              allowClear={obj.allowClear}
              autoFocus={obj.autoFocus}
              dateRender={obj.dateRender}
              disabled={obj.disabled}
              disabledDate={obj.disabledDate}
              getCalendarContainer={obj.getCalendarContainer}
              mode={obj.mode}
              open={obj.open}
              popupStyle={obj.popupStyle}
              dropdownClassName={obj.dropdownClassName}
              size={obj.size}
              suffixIcon={obj.suffixIcon}
              inputReadOnly={obj.inputReadOnly}
              align={obj.align}
              valueFormat={obj.valueFormat}
            ></RangePicker>
        }
        return rows
      }
      const handleSearch = (e) => {
        e.preventDefault()
        const { form } = this
        const data = form.getFieldsValue()
        console.log(data)
        // this.form.validateFields((err, values) => {
        //   if (!err) {
        //     console.log('Received values of form: ', values)
        //   }
        // })
        this.$emit('search', data)
      }
      const handleReset = (e) => {
        this.$emit('reset', e)
      }
      const searchBox = this.list.map((item, index) => {
        const row = renderAssembly(item)
        if (index < 2) {
          return (
            <Col span={8}>
              <Item label={item.label}>
                { this.form.getFieldDecorator(item.fields, {
                  rules: item.validate
                  })(row)
                }
              </Item>
            </Col>
          )
        } else {
          return (
            <template style={this.advanced ? 'display:block' : 'display:none'}>
              <Col span={8}>
                <Item label={item.label}>
                  { this.form.getFieldDecorator(item.fields, {
                    rules: item.validate
                    })(row)
                  }
                </Item>
              </Col>
            </template>
          )
        }
      })
      return (
        <Form form={this.form} class="search-form">
          <Row gutter={24}>
            { searchBox }
            <Col md={!this.advanced && 8 || 24} sm={24}>
              <Item style={this.advanced && { float: 'right', overflow: 'hidden', marginBottom: 0 } || {}}>
                <Button type="primary" onClick={handleSearch}>查询</Button>
                <Button style="margin-left: 8px" onClick={handleReset}>重置</Button>
                <a onClick={this.toggleAdvanced} style="margin-left: 8px">
                  { this.advanced ? '收起' : '展开' }
                  <a-icon type={this.advanced ? 'up' : 'down'}/>
                </a>
              </Item>
            </Col>
          </Row>
        </Form>
      )
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  },
  render () {
    return (
      <Card class="search-wrapper" bordered={false}>
        {/* <div class="search-wrapper-spread">
            <a-icon type="caret-down" />
        </div> */}
        <div class="search-wrapper-table">
          { this.renderForm() }
        </div>
      </Card>
    )
  }
}

ListSearch.install = function (Vue) {
  Vue.component(ListSearch.name, ListSearch)
}

export default ListSearch
